<template>
  <div class="air">
    <el-row :gutter="20">
        <el-col :span="24" class="paddCol" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span v-if="this.alarmstate != 0 && this.alarmstate != 3" style="color:#ea2e2e"><i class="el-icon-menu"></i> <span class="shebeiname">{{this.data.name}} (离线)</span></span>
                <span v-if="this.alarmstate == 0 || this.alarmstate == 3"><i class="el-icon-menu"></i> <span class="shebeiname">{{this.data.name}}</span></span>
              </div>
              <div class="temp_card">
                <div class="temp_data">
                  <div class="temp_datal">
                    <div class="device_border">
                      <div class="device_top">
                        <div class="device_data">
                          <div class="device_filterate">
                            <svg class="icon" aria-hidden="true" :style="this.data.unit[6].value >= 2000 ? 'color:#ff0000':'color:fff'">
                              <use xlink:href="#icon-lvwang"></use>
                            </svg>
                          </div>
                          <div class="device_interval">
                            {{ (this.data.unit[34].value-this.data.unit[11].value).toFixed(0)}}
                            <span>恒湿区间</span>
                            {{ (this.data.unit[34].value+this.data.unit[12].value).toFixed(0) }}
                          </div>
                          <div class="device_pan">
                            <img src="../../assets/120a/pan1.png" alt="" v-if="this.data.unit[4].value < this.data.unit[34].value-this.data.unit[11].value">
                            <img src="../../assets/120a/pan2.png" alt="" v-if="(this.data.unit[4].value >= this.data.unit[34].value -this.data.unit[11].value) && (this.data.unit[4].value <= this.data.unit[34].value +this.data.unit[12].value)">
                            <img src="../../assets/120a/pan3.png" alt="" v-if="this.data.unit[4].value > this.data.unit[34].value+this.data.unit[12].value">
                            <p class="device_pan_data">
                              {{this.data.unit[4].value.toFixed(1)}}
                            </p>
                          </div>
                          <div class="device_pan_title">
                            <span>当前湿度</span>(%RH)
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">环境温度</div>
                            <div class="device_data_value">{{this.data.unit[2].value.toFixed(1)}}</div>
                            <div class="device_data_flag">{{this.data.unit[2].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">环境湿度</div>
                            <div class="device_data_value">{{this.data.unit[3].value.toFixed(1)}}</div>
                            <div class="device_data_flag">{{this.data.unit[3].flag}}</div>
                          </div>
                          <div class="device_data_flex">
                            <div class="device_data_title">设定湿度</div>
                            <div class="device_data_value">{{this.data.unit[34].value.toFixed(0)}}</div>
                            <div class="device_data_flag">{{this.data.unit[34].flag}}</div>
                          </div>
                        </div>
                        <div class="device_img">
                          <div class="device_img_box">
                            <img src="../../assets/120a/120a.png" alt="">
                          </div>
                          <div class="device_tishi_box">
                              <span class="device_tishi" v-if="this.data.unit[24].value == 0">已关机</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 24">灭菌已开启</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 20">除湿已开启</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 18">加湿已开启</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 17 && this.data.unit[44].value == 0 && this.data.unit[45].value == 0">恒湿已开启</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 17 && this.data.unit[44].value == 1 && this.data.unit[38].value == 0">正在加湿（恒湿）</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 17 && this.data.unit[44].value == 1 && this.data.unit[38].value == 1">湿膜净化（恒湿）</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 17 && this.data.unit[45].value == 1 && this.data.unit[48].value == 0">正在除湿（恒湿）</span>
                              <span class="device_tishi" v-if="this.data.unit[24].value == 17 && this.data.unit[45].value == 1 && this.data.unit[48].value == 1">正在除霜（恒湿）</span>
                          </div>
                        </div>
                        <div class="device_state">
                          <div class="device_warter">
                            <!-- 水位 -->
                            <img src="../../assets/120a/water90.png" alt="" v-if="this.data.unit[5].value>90">
                            <img src="../../assets/120a/water70.png" alt="" v-if="this.data.unit[5].value>70&&this.data.unit[5].value<=90">
                            <img src="../../assets/120a/water60.png" alt="" v-if="this.data.unit[5].value>60&&this.data.unit[5].value<=70">
                            <img src="../../assets/120a/water40.png" alt="" v-if="this.data.unit[5].value>40&&this.data.unit[5].value<=60">
                            <img src="../../assets/120a/water30.png" alt="" v-if="this.data.unit[5].value>10&&this.data.unit[5].value<=40">
                            <img src="../../assets/120a/water10.png" alt="" v-if="this.data.unit[5].value<=10">
                            <p class="device_warter_data">{{this.data.unit[5].value}}%</p>
                          </div>
                          <div class="device_warter_title">
                            当前水位（%）
                          </div>
                          <div class="device_state_flex">
                            <div :class="this.data.unit[68].value != 0 ? 'device_state_item device_state_color':'device_state_item'">
                              <svg aria-hidden="true" class="icon">
                                <use xlink:href="#icon-qingli-01" />
                              </svg>
                              <span>清洗状态</span>
                            </div>
                            <div :class="this.data.unit[46].value != 0 ? 'device_state_item warning':'device_state_item'">
                              <svg aria-hidden="true" class="icon icon_jingshi">
                                <use xlink:href="#icon-safe" />
                              </svg>
                              压力释放
                            </div>
                          </div>
                          <div class="device_state2_flex">
                            <svg aria-hidden="true" class="icon humi_iconsvg" v-if="this.data.unit[40].value != 1 && this.data.unit[50].value != 1">
                              <use xlink:href="#icon-jinshui" />
                            </svg>
                            <svg aria-hidden="true" class="icon humi_iconsvg" v-if="this.data.unit[40].value == 1 || this.data.unit[50].value == 1">
                              <use xlink:href="#icon-jinshui-copy" />
                            </svg>
                            <span :class="this.data.unit[40].value == 1 ? 'device_state_color':''">进水状态</span>
                            <span>&nbsp;/&nbsp;</span>
                            <span :class="this.data.unit[50].value == 1 ? 'device_state_color':''">排水状态</span>
                          </div>
                          <div :class="this.data.unit[25].value == 2 ? 'device_state3_flex':'device_state3_flex  device_state_color'">
                            <svg aria-hidden="true" class="icon humi_iconsvg2">
                              <use xlink:href="#icon-zidong" />
                            </svg>
                            <span v-if="this.data.unit[25].value == 2">自动排水未启用</span>
                            <span v-if="this.data.unit[25].value != 2">自动排水启用</span>
                          </div>
                        </div>
                      </div>
                      <div class="device_bottom">
                        <div :class="this.switch != 0 ? 'device_bottom_bontton active' : 'device_bottom_bontton'" @click="switchChange(24)">
                          <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-guanji"></use>
                          </svg>
                          <span v-if="this.switch != 0">开机</span>
                          <span v-if="this.switch == 0">关机</span>
                        </div>
                        <div  :class="this.switch != 0 && this.speed == 1 ? 'device_bottom_bontton active' : 'device_bottom_bontton'" @click="switchChange(27,1)">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fengsu"></use>
                          </svg>
                          低速
                        </div>
                        <div  :class="this.switch != 0 && this.speed == 2 ? 'device_bottom_bontton active' : 'device_bottom_bontton'" @click="switchChange(27,2)">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fengsu2z"></use>
                          </svg>
                          中速
                        </div>
                        <div  :class="this.switch != 0 && this.speed == 0 ? 'device_bottom_bontton active' : 'device_bottom_bontton'" @click="switchChange(27,0)">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fengsu1"></use>
                          </svg>
                          高速
                        </div>
                        <!-- <div class="device_bottom_bontton">
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-paishui"></use>
                          </svg>
                          排水
                        </div> -->
                      </div>
                    </div>
                    <div class="temp_datar">
                      <div class="k8s_echart">
                        <div class="temp_pie_name">
                          <svg class="icon chart_icon" aria-hidden="true">
                              <use xlink:href="#icon-shujuquxianzoushiqushitubiaoshangshengxianxing"></use>
                          </svg>
                          数据分析
                        </div>
                        <div class="temp_echart_top">
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi1"></div>
                              湿度
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="4" :height="height" :color="color0" :background="background0" :reasMax="humireasMax" :reasMin="humireasMin" :fanwei="2419200" ref="childechart0"></echars>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="temp_datal_bottom">
                        <div class="temp_peak_mode">
                          <div class="temp_peak_name">
                            <i class="el-icon-s-data"></i>
                            峰值数据（{{this.data.unit[4].name}}）
                          </div>
                          <div class="temp_peak">
                            <div class="temp_peak_title">
                              <div class="temp_peak_title_max">Max</div>
                              <div class="temp_peak_title_min">Min</div>
                            </div>
                            <div class="temp_peak_left"></div>
                            <div class="temp_peak_right" >
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_max"></div>
                                <div class="temp_peak_data"><span>{{this.shiMax.toFixed(1)}}</span><span class="temp_peak_data_flag">{{this.data.unit[4].flag}}</span></div>
                              </div>
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_min"></div>
                                <div class="temp_peak_data"><span>{{this.shiMin.toFixed(1)}}</span><span class="temp_peak_data_flag">{{this.data.unit[4].flag}}</span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                  <div class="data_bottom">
                      <div class="temp_time_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-time"></i>
                          时间统计
                        </div>
                        <div class="temp_time">
                          <div class="temp_time_line">
                            <p class="temp_warning_title">首次上线：</p>
                            <p class="temp_time_year">{{ this.firstconnecttimeYear }} </p> 
                            <p class="temp_time_hour">{{ this.firstconnecttimeHour}}</p>
                          </div>
                          <div class="temp_time_line" v-if="this.connecttime > 0">
                            <p class="temp_warning_title">最近上线：</p>
                            <p class="temp_time_year">{{ this.connecttimeYear }} </p>
                            <p class="temp_time_hour">{{ this.connecttimeHour }}</p>
                          </div>
                          <div class="temp_time_line" v-if="this.devtimeshow == 1">
                            <p class="temp_warning_title">累计时长：</p>
                            <p class="temp_time_h"> {{this.totaltime}} </p> <span class="temp_time_s"> h</span>
                          </div>
                        </div>
                      </div>
                      <div class="temp_time_mode temp_grade_mode">
                        <div class="grade_i" @click="ChangeGradeDiv()">
                          <i class="el-icon-caret-bottom"></i>
                        </div>
                        <div class="grade" v-if="this.gradeDiv == true">
                          <div :class="this.data.airlevelsource == 0 ? 'grade_level grade_active':'grade_level'" @click="ChangeGrad(0)">平均值</div>
                          <div :class="this.data.airlevelsource == 1 ? 'grade_level grade_active':'grade_level'" @click="ChangeGrad(1)">自身值</div>
                        </div>
                        <div class="temp_peak_name">
                          <i class="el-icon-stopwatch"></i>
                          空气等级
                        </div>
                        <div class="temp_grade">
                          <div :class="gradec">
                            <div class="temp_grade_title">空气等级</div>
                            <div class="temp_grade_down">
                              <div class="temp_grade_san"></div>
                            </div>
                            <div :class="grades">
                              <span>{{this.grade}}</span>
                            </div>
                          </div>
                          <div :class="gradec2">
                            <div class="temp_grade_title">粉尘等级</div>
                            <div class="temp_grade_down">
                              <div class="temp_grade_san"></div>
                            </div>
                            <div :class="grades2">
                              <span>{{this.grade2}}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="temp_pie_mode">
                        <div class="temp_pie_name">
                          <svg class="icon chart_icon" aria-hidden="true">
                              <use xlink:href="#icon-chucun"></use>
                          </svg>
                          储存空间
                        </div>
                        <div class="chart_pie" ref="chart4"></div>

                      </div>
                    </div> 
                </div>
              </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import $ from 'jquery';
import * as echarts from 'echarts'
import echars from '../overview/echars.vue';
export default {
  components:{echars},
  props: ["msg"],
  data() {
    return {
      alarmstate:0,//在线离线
      timeGetData:'',//接口方法的定时器
      data: "", //当前设备数据
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      chart4: null,
      // 峰值
      shiMax:0,
      shiMin:0,
      num:45,
      //控制项
      switch:0,//当前键值状态   24
      speed:0,//当前点击风速速 //高低速 0高速 1低速 2中速   27
      waitTime:1,//等待返回时间  实际等待时间为秒数-1
      openNum:0,//当前点击键值计时
      openGetData:'',//当前点击键值定时器
      //属性数据
      firstconnecttimeYear:'',//首次上线年月日
      firstconnecttimeHour:'',//首次上线时分
      connecttime:0,//最近上线时间戳
      connecttimeYear:'',//最近上线年月日
      connecttimeHour:'',//最近上线时分
      totaltime:0,//累计运行时间
      devtimeshow:localStorage.getItem('累计时长'),//累计运行时间显示隐藏
      errorcount:0,//报警总数量
      valueerror:0,//数值报警
      connecterror:0,//链路报警
      valuecount:0,//累计记录条数
      recordcount:0,//剩余记录条数
      valuedisk:0,//存储空间磁盘容量比特
      valuediskFlag:'',//存储空间磁盘容量单位
      // 曲线内容---
      humireasMax:0,//曲线合理区间，高低限范围
      humireasMin:0,//曲线合理区间，高低限范围
      color0:'#4fe33b',
      background0:'rgba(197,234,180,0.2)',
      historyNum:0,
      height:'330',
      // 曲线结束---
      localname:'',//本地储存名称
      //空气质量相关
      gradeDiv:false,
      gradec:'temp_grade_circle_you',
      grades:'temp_grade_data_you',
      grade:'优',
      gradec2:'temp_grade_circle_you',
      grades2:'temp_grade_data_you',
      grade2:'优',
      
    };
  },
  mounted() {
  },
  created() {
    // 判断是否是直接访问当前设备页面
    if(localStorage.getItem('当前访问路径') == 'overview2'){
      this.localname = "6.0展示设备卡片"
    }else{
      this.localname = "当前设备编号"
    }
    this.data = JSON.parse(localStorage.getItem("menuDataJson"))
    // 曲线内容---
    this.info = JSON.parse(localStorage.getItem(this.localname))
    this.$nextTick(() => {
      this.$refs.childechart0.getCharts0()
      this.getCharts4()
    })
    // 曲线内容---
    this.getData(JSON.parse(localStorage.getItem(this.localname)))
    this.getDataStart()
  },
  methods: {
    //重新定时走接口
    getDataStart(){
      this.$nextTick(() => {
          this.timeGetData = setInterval(() => {
            if(this.dataor == 0){ //接口失败提示
              this.$message({
                message: '服务器访问失败',
                type: 'error',
                duration: 1000
              });
            }
            this.getData(JSON.parse(localStorage.getItem(this.localname)))
            this.dataor = 0
          }, 3000); 
      })
    },
    getData(info){
      // 曲线内容---
      this.info = info
      // 曲线内容---
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min-alarmhvalue-alarmhhvalue-alarmlvalue-alarmllvalue-valuemax-valuemin"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          // res.data.getdevinfo[0].unit[24].value = 16
          this.data = res.data.getdevinfo[0];
          // this.data.unit[6].value = 3000
          // this.data.unit[68].value = 1
          // this.data.unit[2].value = 22.2
          // 假数据
          // this.data.valuecount = 31111
          // this.data.unit[4].min = 0
          // this.data.unit[4].max = 100
          // this.data.unit[4].valuemin = 20
          // this.data.unit[4].valuemax = 80
          this.alarmstate = res.data.getdevinfo[0].alarmstate
          this.num = parseFloat(this.data.unit[34].value).toFixed(0)
          if(this.openNum == 0){//不处于计时状态，正常读取真实状态
            this.switch = this.data.unit[24].value
            this.speed = this.data.unit[27].value
          }
          // 上次上线时间
          this.firstconnecttimeYear = this.formatDate(this.data.firstconnecttime*1000, 'YYYY-MM-DD')
          this.firstconnecttimeHour = this.formatDate(this.data.firstconnecttime*1000, 'H:m')
          // 最近上线时间
          this.connecttime = this.data.connecttime
          this.connecttimeYear = this.formatDate(this.data.connecttime*1000, 'YYYY-MM-DD')
          this.connecttimeHour = this.formatDate(this.data.connecttime*1000, 'H:m')
          //累计运行时间 拿到的分钟转成小时
          this.devtimeshow = localStorage.getItem('累计时长')
          this.totaltime = this.data.totaltime != undefined ? (this.data.totaltime/60).toFixed(0) : 0
          //故障累计总条数
          this.errorcount = this.data.errorcount
          // 数据报警累计条数
          this.valueerror = this.data.valueerror
          //离线故障累计条数
          this.connecterror = this.data.connecterror
          //历史记录已记录条数
          this.valuecount = this.data.valuecount
          //剩余记录条数
          this.recordcount = this.data.recordmax-this.data.valuecount

          // 磁盘容量计算
          var sk = 0;
          if(this.data.valuedisk == 0){ //空间为0
            this.valuedisk = 0
            this.valuediskFlag = 'MB'
          }else if(this.data.valuedisk > 0){ //空间大于0
            sk = this.data.valuedisk/8
            if(sk >= 1){//bit或kb
              sk = sk/1024
              if(sk >= 1){
                sk = sk/1024
                if(sk >= 1){//kb或mb
                  sk = sk/1024
                  if(sk >= 1){//mb或gb
                    sk = sk/1024
                    if(sk >= 1){//gb或tb
                      sk = sk/1024
                      if(sk >= 1){
                      }else{//TB展示
                        this.valuedisk = (sk*1024).toFixed(1)
                        this.valuediskFlag = 'TB'
                      }
                    }else{//GB展示
                      this.valuedisk = (sk*1024).toFixed(1)
                      this.valuediskFlag = 'GB'
                    }
                  }else{//MB展示
                    this.valuedisk = (sk*1024).toFixed(1)
                    this.valuediskFlag = 'MB'
                  }
                }else{//KB展示
                  this.valuedisk = (sk*1024).toFixed(1)
                  this.valuediskFlag = 'KB'
                }
              }else{//B展示
                this.valuedisk = (sk*1024).toFixed(1)
                this.valuediskFlag = 'B'
              }
            }else{//bit展示
              this.valuedisk = this.data.valuedisk.toFixed(1)
              this.valuediskFlag = 'BIT'
            }
          }
          // 曲线内容---
          //计算曲线合理区间（高低限）
          this.humireasMax = (this.data.unit[4].alarmhvalue+this.data.unit[4].alarmhhvalue)/2
          this.humireasMin = (this.data.unit[4].alarmlvalue+this.data.unit[4].alarmllvalue)/2
          if(this.historyNum == 0){
            this.historyNum++
            this.getHisData()
          }
          // 曲线结束---
          // 空气质量
          // this.data.tvocstate = 2
          // this.data.pm25state = 2
          this.data.tvocstate == undefined ? 0 : this.data.tvocstate
          if(this.data.tvocstate == 0){// 优
            this.grade = '优'
            this.gradec = 'temp_grade_circle_you'
            this.grades = 'temp_grade_data_you'
          }else if(this.data.tvocstate == 1){ //良
            this.grade = '良'
            this.gradec = 'temp_grade_circle_liang'
            this.grades = 'temp_grade_data_liang'
          }else if(this.data.tvocstate == 2){ //差
            this.grade = '一般'
            this.gradec = 'temp_grade_circle_cha'
            this.grades = 'temp_grade_data_cha'
          }
          this.data.pm25state == undefined ? 0 : this.data.pm25state
          if(this.data.pm25state == 0){// 优
            this.grade2 = '优'
            this.gradec2 = 'temp_grade_circle_you'
            this.grades2 = 'temp_grade_data_you'
          }else if(this.data.pm25state == 1){ //良
            this.grade2 = '良'
            this.gradec2 = 'temp_grade_circle_liang'
            this.grades2 = 'temp_grade_data_liang'
          }else if(this.data.pm25state == 2){ //差
            this.grade2 = '一般'
            this.gradec2 = 'temp_grade_circle_cha'
            this.grades2 = 'temp_grade_data_cha'
          }
          //峰值计算
          if(this.data.unit[4].valuemin == undefined || this.data.unit[4].valuemin == null){
            this.data.unit[4].valuemin = 0
          }
          if(this.data.unit[4].valuemax == undefined || this.data.unit[4].valuemax == null){
            this.data.unit[4].valuemax = 0
          }
          
          this.shiMin = this.data.unit[4].valuemin
          var shiMin = this.shiMin <= this.data.unit[4].min ? this.data.unit[4].min : this.shiMin //取最小范围值
          var shiMinB = ((shiMin+this.data.unit[4].min)/this.data.unit[4].max)*250 // 最小值范围~最大值范围取百分比，取占总长度120px的距离
          $('.temp_peak_humi_min').css('width',shiMinB+'px')
          this.shiMax = this.data.unit[4].valuemax
          var shiMax = this.shiMax >= this.data.unit[4].max ? this.data.unit[4].max : this.shiMax //取最大范围值
          var shiMaxB = ((shiMax+this.data.unit[4].min)/this.data.unit[4].max)*250 // 最小值范围~最大值范围取百分比，取占总长度120px的距离
          $('.temp_peak_humi_max').css('width',shiMaxB+'px')
          this.getCharts4()
        }
      })
    },
    //空气质量切换框打开关闭
    ChangeGradeDiv(val){
      if(val == 0){
        this.gradeDiv = false
      }else{
        this.gradeDiv = !this.gradeDiv
      }
    },
    //空气质量切换下发
    ChangeGrad(val){
      this.gradeDiv = false
      var params = {
        "setdevinfo":[
            {
                "uid": this.info.uid,
                "type": this.info.type,
                "addr": this.info.addr,
                "airlevelsource":val
            }
        ],
        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
            this.$notify({
                  title: '操作成功',
                  type: 'success',
                  duration: 1500
              });
          }else{
              this.$notify({
                  title: '切换失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    // 下发控制
    switchChange(id,value){
      var val = 0
      if(id == 24){
        if(this.switch == 0){
          val = 17
          this.switch = 17
        }else{
          val = 0
          this.switch = 0
        }
      }else if(id == 27){
        val = value
        this.speed = value
      }
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: id,
                      value: val
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.openNum = 0
      clearInterval(this.openGetData);
      this.openGetData = null;
      this.openGetData = setInterval(() => {
        if((this.data.unit[id].value != val) && (this.openNum <= this.waitTime)){
            this.openNum++
        }else{//超过10秒返回的值和当前的值不一样 或者已读到当前状态修改成功，就结束循环读取真实状态
          this.switch = this.data.unit[24].value
          this.speed = this.data.unit[27].value
          this.openNum = 0
          clearInterval(this.openGetData);
          this.openGetData = null;
        }
      }, 1000); 
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
              
          }else{
              this.$notify({
                  title: '操作失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    //历史曲线 
    getHisData(){
      this.$nextTick(() => {
        if(this.$refs.childechart0 != undefined){
          this.$refs.childechart0.getHisData()
        }
      })
    },
    speedOpen(val){
      var st = 0
        if(this.open == 0){
          this.$message({
            message: '设备未开机',
            type: 'error',
            duration: 1000
          });
          return false;
        }else{
            st = val
        }
      var params = {
        "setdevinfo":[
            {
                "uid": this.info.uid,
                "type": this.info.type,
                "addr": this.info.addr,
                "unit":[
                  {
                    id: 27,
                    value: st
                  }
                ]
            }
        ],
        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.speed = st
      this.openNum = 0
      clearInterval(this.openGetData);
      this.openGetData = null;
      this.openGetData = setInterval(() => {
        if((this.data.unit[27].value != this.speed) && (this.openNum <= 5)){
            this.openNum++
        }else{//超过10秒返回的值和当前的值不一样 或者已读到当前状态修改成功，就结束循环读取真实状态
          this.speed = this.data.unit[27].value
          this.openNum = 0
          clearInterval(this.openGetData);
          this.openGetData = null;
        }
      }, 1000); 
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
              
          }else{
              this.$notify({
                  title: '操作失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    getCharts4(){
      if (this.chart4 == null) {
        this.chart4 = echarts.init(this.$refs.chart4);
      }
      
      var option = {
        title: {
          show:false,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '储存容量',
            type: 'pie',
            // radius: '80%',
            radius: ['50%', '70%'],
            // center: ['50%', '50%'],
            label: {
              color: '#fff',
              formatter:function(data){
	              return `${data.name} `
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#ffa618a3',
                    '#5eceffc4',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
              { 
                value: this.valuecount, 
                name: '累计数量',
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
              },
            ],
          },
          {//重复为了既在中间显示百分比，也拉出边线来显示名称和值
            name: '储存容量',
            type: 'pie',
            // radius: ['50%', '80%'],
            radius: '70%',
            label: {
              color: '#fff',
              normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                   textStyle : {                   
                      align : 'center',
                      baseline : 'middle',
                      fontFamily : '微软雅黑',
                      fontSize : 15,
                      color:'#fff',
                      fontWeight : 'bolder'
                    }
                },
            },
            labelLine: {
              length: 10, // Length of line from pie to label
              length2: 20, // Distance from pie to start of line
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#000',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#ffa61878',
                    '#5eceff57',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
            { 
                value: this.valuecount, 
                name: '累计数量 ',
                itemStyle: {
                  borderColor: '#ffa61878',
                  borderWidth: 2,
                } 
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
                itemStyle: {
                  borderColor: '#5eceffc4',
                  borderWidth: 2,
                } 
              },
            ],
          }
        ]
      };
      this.chart4.setOption(option);
    },
  },
  // 清除定时器
    beforeDestroy() {
        clearInterval(this.timeGetData);
        this.timeGetData = null;
        // 下发控制计时器
        clearInterval(this.openGetData);
        this.openGetData = null;
    },
};
</script>

<style scoped>
.el-card {
  background: none;
  color: #fff;
  border: 1px solid rgba(89, 129, 165, 0.4);
}
/deep/ .el-card__header {
  background: rgba(89, 129, 165, 0.2);
  padding: 16px 20px;
  border-bottom: none;
}
.box-card {
  /* overflow: hidden; */
}
.temp_card{
  height: 850px;
}
.clearfix{
  font-size: 18px;
}
.shebeiname{
  font-weight: bold;
}
/* 数据 */
.temp_data{
  height: 805px;
}
.temp_datal{
  display: flex;
}
.temp_datar{
  width: 490px;
  margin-left: 20px;
}
.device_border{
  width: 1024px; 
  height: 600px;
  margin-top: 2px;
  border: 1px solid #5981a566;
  box-shadow: 0px 0px 12px #b4e9ff73;
  border-radius: 10px;
}
.device_top{
  width: 1024px;
  height: 505px;
  border-bottom: 1px solid #5981a566;
  display: flex;
}
/* 表盘数据 */
.device_data{
  width: 348px;
}
.device_filterate{
  height: 30px;
  font-size: 35px;
  padding-top: 5px;
  padding-left: 10px;
}
.device_interval{
  height: 20px;
  line-height: 30px;
  text-align: center;
  color: #5eceff;
  font-weight: bold;
  letter-spacing: 2px;
}
.device_interval span{
  color: #5eceff;
}
.device_pan{
  text-align: center;
  height: 220px;
  position: relative;
}
.device_pan img{
  height: 100%;
}
.device_pan_data{
  position: absolute;
  top: 100px;
  width: 100%;
  text-align: center;
  font-size: 38px;
}
.device_pan_title{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: #5eceff;
}
.device_pan_title span{
  letter-spacing: 3px;
}
.device_data_flex{
  display: flex;
  align-items: self-end;
  height: 45px;
  margin-bottom: 10px;
}
.device_data_title{
  width: 165px;
  text-align: right;
  padding-right: 30px;
  font-size: 18px;
}
.device_data_value{
  width: 70px;
  font-size: 24px;
  color: #00fff6;
  font-weight: lighter;
}
.device_data_flag{
  font-size: 18px;
  padding-left: 10px;
}
/* 中间设备图片 */
.device_img{
  width: 329px;
  border-left: 1px solid #5981a566;
  border-right: 1px solid #5981a566;
}
.device_img_box{
  height: 370px;
  margin-top: 40px;
  text-align: center;
}
.device_img_box img{
  height: 100%;
}
.device_tishi_box{
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.device_tishi{
  font-weight: bold;
  padding-left: 0px;
  font-size: 26px;
  background:-webkit-linear-gradient(left,#0ff,#a0a0a0 25%,#0ff 50%,#a0a0a0 75%,#0ff);
  color:transparent;
  -webkit-background-clip:text;
  background-size:200% 100%;
  animation:masked-animation 1s infinite linear
}
@-webkit-keyframes masked-animation {
    0% {
        background-position:0 0;
    }
    100% {
        background-position:-100% 0;
    }
}
/* 数据状态 */
.device_state{
  width: 347px;
}
.device_warter{
  width: 100%;
  height: 200px;
  text-align: center;
  position: relative;
  margin-top: 65px;
}
.device_warter img{
  height: 100%;
}
.device_warter_data{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 80px;
  font-size: 38px;
}
.device_warter_title{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: #5eceff;
  margin-top: 5px;
}
.device_state_flex{
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 15px;
}
.device_state_item{
  display: flex;
  align-items: center;
  font-size: 18px;
}
.device_state_item .icon{
  font-size: 35px;
  margin-right: 10px;
}
.device_state_item .icon_jingshi{
  position:relative;
  top: 3px;
}
.warning{
  color: #f7ca4c;
}
.device_state2_flex{
  padding-left: 34px;
  display: flex;
  align-items: center;
  margin: 20px 0px;
}
.humi_iconsvg{
  font-size: 35px;
  margin-right: 10px;
  margin-left: 4px;
}
.device_state2_flex span{
  font-size: 18px;
}
.humi_iconsvg2{
  font-size: 26px;
  margin-right: 14px;
  margin-left: 4px;
}
.device_state3_flex{
  display: flex;
  padding-left: 39px;
  align-items: center;
}
.device_state3_flex span{
  font-size: 18px;
}
.device_state_color{
  color: #00fff6;
}
/* 按钮 */
.device_bottom{
  display: flex;
}
.device_bottom_bontton{
  height: 93px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border-left: 1px solid #5981a566;
  font-size: 22px;
  cursor: pointer;
}
.device_bottom_bontton:first-child{
  border-left: none;
}
.active{
  background: #2132748a;
  box-shadow: inset 0 0 10px #bdbdbd59;
}
.device_bottom_bontton .icon{
  font-size: 30px;
  margin-right:10px;
}
/* 曲线 */
.k8s_echart{
  width: 490px;
  height: 320px;
  border-radius: 10px;
  margin-top: 2px;
  background: #0000002b;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_icon{
  font-size: 20px;
}
.temp_echart_top{
  display: flex;
  margin-left: 10px;
}
.tempChart{
  width: 500px;
  position: relative;
  top: -20px;
}
.tempChart_title{
  width: 100px;
  position: absolute;
  top: 15px;
  right: 22px;
  display: flex;
  align-items: center;
}
.tempChart_tishi1{
  width: 25px;
  height: 10px;
  background: #4fe33b;
  margin-right: 5px;
}
.tempChart_tishi2{
  width: 25px;
  height: 10px;
  background: #ffa618;
  margin-right: 5px;
}
.chart_detail {
  width: 100%;
  height: 250px;
  position: relative;
}
/* 峰值 */
.temp_datal_bottom{
  width: 861px;
  display: flex;
}
.temp_peak_mode{
  width: 490px;
  height: 260px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 20px;
  margin-top: 20px;
}
.temp_peak_name{
  width: 100%;
  font-size: 18px;
  margin-left: 30px;
}
.temp_peak{
  display: flex;
  margin-top: 35px;
  margin-left: 35px;
}
.temp_peak_title{
  height: 150px;
  width: 30px;
  margin-right:10px;
}
.temp_peak_title_max{
  height:75px;
  line-height: 75px;
}
.temp_peak_title_min{
  height:72px;
  line-height: 72px;
}
.temp_peak_left{
  height: 150px;
  width: 1px;
  background: #d4d3d3;
}
.temp_peak_right{
  height: 150px;
  width: 370px;
  padding-top: 22px;
}
.temp_peak_flex{
  display: flex;
  align-items: center;
  margin-bottom: 43px;
  transform-origin: left top;
  transition: transform 1s;
  cursor: pointer;
}
.temp_peak_flex:hover{
  transform: scale(1.2);
}
.temp_peak_flex:last-child{
  margin-bottom: 0px;
}
.temp_peak_humi_max{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#4fe33b);
}
.temp_peak_humi_min{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#4fe33b);
}
.temp_peak_data{
  margin-left: 10px;
  text-align: center;
}
.temp_peak_data_flag{
  font-size: 12px;
  color: #969696;
  margin-left: 5px;
}
/* 下方综合数据 */
.data_bottom{
  display: flex;
}
/* 在线时间 */
.temp_time_mode{
  width: 466px;
  height: 235px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 44px;
  margin-top: 20px;
}
.temp_time{
  height: 145px;
  margin-top: 20px;
  margin-left: 40px;
  display: flex;
  margin-right: 30px;
  color: #d4d3d3;
  flex-wrap: wrap;
  align-items: center;
}
.temp_time_line{
  width: 100%;
  margin-bottom: 27px;
  position: relative;
  top: 9px;
  display: flex;
}
.temp_warning_title{
  color: #d4d3d3;
}
.temp_time .temp_warning_title{
  width: 90px;
}
.temp_time_year{
  width: 160px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_hour{
  width: 65px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_h{
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
  position: relative;
  top: -5px;
}
.temp_time_s{
  color: #5eceff;
  margin-left: 5px;
}
/* 空气等级 */
.temp_grade_mode{
  margin-right: 44px;
  width: 490px;
  position: relative;
}
.grade_i{
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  z-index: 2;
}
.grade{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 123px;
  background: #273a56c4;
  border: 1px solid #70707063;
  z-index: 1;
}
.grade_level{
  text-align: center;
  line-height: 50px;
  height: 50px;
  cursor: pointer;
}
.grade_active{
  background: #4e9cca8f;
}
.grade_level:first-child{
  height: 70px;
  line-height: 80px;
  width: 100%;
  border-bottom: 1px dashed #70707063;
}
.temp_grade{
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 17px;
}
.temp_grade_circle_you{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #90fe906e;
  box-shadow: inset 0 0px 15px #4fe33ba8; /* 添加半透明阴影 */
  animation: shadowPulse1 4s infinite; /* 动画 */
}
.temp_grade_circle_liang{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #5eceffad;
  box-shadow: inset 0 0px 15px #5eceffa8; /* 添加半透明阴影 */
  animation: shadowPulse2 4s infinite; /* 动画 */
}
.temp_grade_circle_cha{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid #ffa618ad;
  box-shadow: inset 0 0px 15px #ffa618a8; /* 添加半透明阴影 */
  animation: shadowPulse3 4s infinite; /* 动画 */
}
/* 动画关键帧 */
@keyframes shadowPulse1 {
  0%, 100% {
    box-shadow: inset 0 0 15px #4fe33ba8;
  }
  50% {
    box-shadow: inset 0 0 40px #4fe33ba8;
  }
}
@keyframes shadowPulse2 {
  0%, 100% {
    box-shadow: inset 0 0 15px #5eceffa8;
  }
  50% {
    box-shadow: inset 0 0 40px #5eceffa8;
  }
}
@keyframes shadowPulse3 {
  0%, 100% {
    box-shadow: inset 0 0 15px #ffa618a8;
  }
  50% {
    box-shadow: inset 0 0 40px #ffa618a8;
  }
}
.temp_grade_title{
  width: 120px;
  height: 50px;
  line-height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.temp_grade_down{
  width: 15px;
  height: 15px;
  margin: 0 auto;
  position: relative;
}
.temp_grade_san{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 居中对齐三角形 */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #ffffffab; /* 调整颜色和尺寸以匹配您的需求 */
}
.temp_grade_data_you{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #4fe33b;
}
.temp_grade_data_liang{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #5eceff;
}
.temp_grade_data_cha{
  text-align: center;
  line-height: 50px;
  font-size: 32px;
  color: #ffa618;
}


/* 储存空间 */
.temp_pie_mode{
  width: 490px;
  height: 235px;
  border-radius: 10px;
  background: #0000002b;
  position: relative;
  margin-top: 20px;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_pie{
  width: 490px;
  height: 180px;
  position: relative;
  top: -10px;
}
.chucun_disk{
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>